<template>
  <div class="detail" v-loading="loading">
    <div class="detail-body">
      <div class="block" v-for="(item, index) of layoutConfig" :key="index">
        <el-divider v-if="index !== 0"></el-divider>
        <div class="block-header">
          <div class="block-header-title">{{ item.groupName }}</div>
        </div>
        <el-row class="block-body" :gutter="16">
          <el-col
            :span="child.row"
            :xs="24"
            v-for="(child, cIndex) of item.children"
            :key="cIndex"
          >
            <template v-if="child.type === 'table'">
              <el-table
                :data="child.data"
                border
                v-bind="child.tableProps"
                style="width: 100%"
              >
                <el-table-column
                  v-for="item of child.columns"
                  :key="item.prop"
                  v-bind="item"
                ></el-table-column>
              </el-table>
            </template>
            <template v-else-if="child.type === 'line'">
              <div style="height: 300px">
                <v-echart
                  :options="{
                    tooltip: {
                      trigger: 'axis',
                      axisPointer: {
                        type: 'cross',
                        label: {
                          backgroundColor: '#6a7985',
                        },
                      },
                    },
                    legend: {
                      data: child.legendData,
                    },
                    xAxis: {
                      type: 'category',
                      boundaryGap: false,
                      data: child.xAxisData,
                    },
                    yAxis: {
                      type: 'value',
                    },
                    series: child.series,
                  }"
                ></v-echart>
              </div>
            </template>
            <template v-else-if="child.type === 'bar'">
              <div style="height: 300px">
                <v-echart
                  :options="{
                    tooltip: {
                      trigger: 'item',
                    },
                    xAxis: {
                      type: 'category',
                      data: child.xAxisData,
                    },
                    yAxis: {
                      type: 'value',
                    },
                    series: [
                      {
                        data: child.seriesData,
                        type: 'bar',
                      },
                    ],
                  }"
                ></v-echart>
              </div>
            </template>
            <template v-else-if="child.type === 'pie'">
              <div style="height: 300px">
                <v-echart
                  :options="{
                    tooltip: {
                      trigger: 'item',
                      formatter: '{a} <br/>{b}: {c} ({d}%)',
                    },
                    legend: {
                      orient: 'vertical',
                      left: 10,
                      data: child.legendData,
                    },
                    series: [
                      {
                        name: '访问来源',
                        type: 'pie',
                        avoidLabelOverlap: true,
                        emphasis: {
                          label: {
                            show: true,
                            fontSize: '30',
                            fontWeight: 'bold',
                          },
                        },
                        data: child.seriesData.map((item, index) => ({
                          value: item,
                          name: child.legendData[index],
                        })),
                      },
                    ],
                  }"
                ></v-echart>
              </div>
            </template>
            <template v-else-if="child.type === 'video'">
              <div ref="dplayer" style="height: 600px">视频</div>
            </template>
            <template v-else>
              <div class="info">
                <span class="info__label">{{ child.label }}</span>
                <span class="info__value" v-if="!isWelink">
                  <el-tag size="mini" v-if="child.value">
                    {{ child.value }}
                  </el-tag>
                </span>
                <span class="info__value" v-else>
                  <el-tag size="mini">
                    {{ welinkData[child.value] || '0' }}
                  </el-tag>
                </span>
              </div>
            </template>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import Echart from 'vue-echarts'

export default {
  name: 'JsonPage',
  props: {
    isWelink: {
      type: Boolean,
      default: false
    },
    welinkData: {
      type: Object,
      default: () => ({})
    },
    layoutConfig: {
      type: Array,
      required: true
    }
  },
  components: {
    'v-echart': Echart
  },
  data () {
    return {
      loading: false
    }
  },
  mounted () {
    // Object.keys(this.$refs).forEach((refKey) => {
    //   if (refKey.includes('video')) {
    //   }
    // })
  },
  methods: {
    renderVideo () {}
  }
}
</script>

<style lang="less" scoped>
.detail {
  &-body {
    margin: 16px;
    background-color: #fff;
  }
}

.block {
  &-header {
    margin-bottom: 24px;

    &-title {
      font-size: 18px;
      font-weight: 700;
    }
  }

  &-body {
    // overflow: hidden;
    font-size: 16px;
  }
}

.info {
  margin-bottom: 16px;

  &__label {
    font-size: 14px;
    color: #666;
    &::after {
      content: '：';
    }
  }
}
</style>
